<template>
  <section class="v-container">
    <header class="v-header">{{ name }}</header>
    <div class="v-content">
      <slot></slot>
    </div>
  </section>
</template>

<script>
export default {
  // 全局感知
  name: "Container",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {
    name: {
      type: String,
      required: true
    }
  },

  // 本地状态
  data () {
    return {};
  },
  computed: {},

  // 事件
  watch: {},
  beforeCreate () { },
  created () { },
  beforeMount () { },
  mounted () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },

  // 非响应式的属性
  methods: {}
}
</script>

<style scoped>
.v-container {
  width: 100%;
  min-height: 100vh;

  background: #eeeff2;
}
.v-header {
  box-sizing: border-box;
  height: 48px;
  padding: 0 0 0 30px;

  color: #333;
  background: #fff;

  font-size: 14px;
  font-weight: bold;
  line-height: 48px;
}
.v-content {
  width: calc(100% - 20px);
  min-height: calc(100vh - 20px);
  margin: 10px;
}

</style>